<template>
    <div class="placeanorder">
        <el-dialog v-model="open" @close="closeInfo" width="78%" align="left"
            style="position: relative;background-color: #f1f1f1;" draggable>
            <div class="mb-20 f20">
                <p>PlaceAnOrder</p>
            </div>
            <div class="flex aic" style="line-height:1.5">
                <span>OrderID:{{ orderName }}</span>
            </div>
            <div class="flex jc-sb mb-10">
                <el-radio-group v-model="radio" @change="changeRadio" class="ml-4">
                    <el-radio label="1" size="large"> Full order </el-radio>
                    <el-radio label="2" size="large"> Partial order </el-radio>
                </el-radio-group>
                <div class="ml-20" v-if="radio == '1'">
                    <span>Set up purchase:</span>
                    <el-select v-model="purcharse" @focus="() => { emits('getBuyerList'), '' }"
                        :remote-method="(val) => { emits('getBuyerList', val) }" remote remote-show-suffix filterable
                        :disabled="hqtySum === qtySum ? true : false" @change="changePur">
                        <el-option v-for="item in buyerList" :key="item.id" :label="item.name"
                            :value="`${item.id}|${item.name}`" />
                    </el-select>
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="PlaceList" @selection-change="selectAll" height="400"
                style="width:100%;border-radius: 20px;">
                <el-table-column type="selection" width="30" />
                <el-table-column type="expand">
                    <template #default="tolist">
                        <div m="4">
                            <el-table :data="tolist.row.purList">
                                <!-- 占位 -->
                                <el-table-column width="30" />
                                <el-table-column />
                                <!-- 占位 -->
                                <el-table-column width="50" />
                                <el-table-column />
                                <el-table-column />
                                <el-table-column />
                                <el-table-column prop="Qtynumber" label="HQty 已订货" />
                                <el-table-column v-if="radio == '2'" />
                                <el-table-column prop="name" label="Purchaser" />
                                <el-table-column />
                                <el-table-column />
                                <el-table-column />
                            </el-table>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed prop="product_name_pi" label="Model" />
                <el-table-column prop="Brand_name" label="Brand" />
                <el-table-column prop="price" label="Price" />
                <el-table-column prop="quantity" label="Qty 数量" />
                <el-table-column prop="hqty" label="HQty 已订货" />
                <el-table-column v-if="radio == '2'" prop=" pqty" label="PQty 部">
                    <template v-slot="pqty">
                        <el-input @input="() => { emits('changeInput1', pqty.row) }"
                            :disabled="pqty.row.quantity === pqty.row.hqty ? true : false" v-model="pqty.row.pqty"
                            placeholder="请输入订货数量" />
                    </template>
                </el-table-column>
                <el-table-column prop="" label="Purchaser">
                    <template v-slot="purcharse">
                        <el-select
                            :disabled="purcharse.row.quantity == purcharse.row.hqty || purcharse.row.hqty < 0 ? true : false"
                            v-model="purcharse.row.purcharse" @focus="() => { emits('getBuyerList'), '' }"
                            :remote-method="(val) => { emits('getBuyerList', val) }" remote remote-show-suffix filterable>
                            <el-option v-for="item in buyerList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="weight" label="Weight" />
                <el-table-column prop="leadingtime" label="Leading Time" />
                <el-table-column prop="state_text" label="State" />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="takeadd" type="primary"
                        style="border:1px solid #6193D2;color:#ffffff">confirm</el-button>
                    <el-button @click="closeWindow"
                        style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2">Cancel</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script  setup>
import { ref } from 'vue'
const multipleTableRef = ref()
const open = ref(false)
const radio = ref('1')
const dialogopen = () => {
    open.value = true
}
const closeInfo = () => {
    purcharse.value = ''
    radio.value = '1'
}
const purcharse = ref('')
//采购设置后将列表所有数据项更改
const changePur = (val) => {
    emits('changePur', val)
}
// 选项框值发生改变时触发，
const selectAll = (val) => {
    emits('selectAll', val)
}
// 切换发货类型
const changeRadio = (val) => {
    purcharse.value = ''
    emits('changeRadio', val)
}
// 创建采购任务
const takeadd = () => {
    emits('purchaseOrderteskAdd', (radio.value === '1' ? 1 : 2))
}
const closeWindow = () => {
    purcharse.value = ''
    open.value = false
    radio.value = '1'
}
const emits = defineEmits(['closeInfo', 'changePur', 'purchaseOrderteskAdd', 'changeRadio', 'selectAll', 'changeInput1', 'getBuyerList'])
const props = defineProps({
    orderName: String,
    PlaceList: Object,
    buyerList: Object,
    purList: Object,
    qtySum: Number,
    hqtySum: Number
})
defineExpose(
    {
        open,
        radio,
        purcharse,
        multipleTableRef,
        dialogopen
    }
)
</script>
<style lang="less">
.placeanorder {
    .el-dialog__body {
        padding-top: 5px;
    }

    .el-dialog__title {
        font-weight: bold;
        font-family: 'swis';
        font-size: 20px;
    }
}
</style>